/*css reset,css初始化代码
--------------------------------------------------------------------------------------------------------------------------*/

body,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
p,
blockquote,
dl,
dt,
dd,
ul,
ol,
li,
pre,
fieldset,
lengend,
button,
input,
textarea,
th,
td {
    margin: 0;
    padding: 0;
}

html,
body {
    height: 100%;
}


/* 设置默认字体 */

body,
button,
input,
select,
textarea {
    font: 12px/1 'microsoft yahei', Helvetica, Arial, "\5b8b\4f53", sans-serif;
    font-family: 'microsoft yahei', 'PingFangSC', 'helvetica neue', 'hiragino sans gb', 'arial', 'microsoft yahei ui', 'simsun', 'sans-serif';
}

body {
    background: #ebf1fa;
}

h1 {
    font-size: 18px;
    /* 18px / 12px = 1.5 */
}

h2 {
    font-size: 16px;
}

h3 {
    font-size: 14px;
}

h4,
h5,
h6 {
    font-size: 100%;
}

address,
cite,
dfn,
em,
var {
    font-style: normal;
}


/* 统一等宽字体 */

small {
    font-size: 12px;
}


/* 小于 12px 的中文很难阅读，让 small 正常化 */


/* 重置列表元素 */

ul,
ol,
li {
    list-style: none;
}


/* 重置文本格式元素 */

a {
    text-decoration: none;
}

a:hover {
    color: #5681c2;
}

abbr[title],
acronym[title] {
    /* 注：1.ie6 不支持 abbr; 2.这里用了属性选择符，ie6 下无效果 */
    border-bottom: 1px dotted;
    cursor: help;
}

q:before,
q:after {
    content: '';
}


/* 重置表单元素 */

legend {
    color: #000;
}


/* for ie6 */

fieldset,
img {
    border: none;
}


/* img 搭车：让链接里的 img 无边框 */


/* 注：optgroup 无法扶正 */

button,
input,
select,
textarea {
    font-size: 100%;
    /* 使得表单元素在 ie 下能继承字体大小 */
}


/* 重置表格元素 */

table {
    border-collapse: collapse;
    border-spacing: 0;
}


/*重置输入框和按钮*/

button,
input {
    box-sizing: border-box;
    outline: none;
}

button {
    cursor: pointer;
}

input:disabled,
button:disabled,
::-moz-placeholder,
::-ms-placeholder,
::-webkit-placeholder {
    color: #BFBDBD;
    border: 1px #BFBDBD solid;
}


/*焦点时候边框变色*/

.onfocus {
    border: 1px #5681C2 solid;
}


/* 重置 hr */

hr {
    border: none;
    width: 100%;
    height: 1px;
    background: #B2C5D9;
}

.pointer {
    cursor: pointer;
}


/* 让非ie浏览器默认也显示垂直滚动条，防止因滚动条引起的闪烁 */


/*html{overflow-y: scroll;}*/


/*文字位置*/

.left {
    text-align: left;
}

.right {
    text-align: right;
}

.center {
    text-align: center;
}


/*清除浮动*/

.fl {
    float: left;
}

.fr {
    float: right;
}

.clearfloat:after {
    display: block;
    clear: both;
    content: "";
    visibility: hidden;
    height: 0
}

.clearfloat {
    zoom: 1;
}

[v-cloak] {
    display: none;
}


/*结构样式*/

.wrap {
    width: 100%;
    min-width: 1024px;
}


/*输入框样式*/

.ipt {
    display: inline-block;
    width: 100%;
    height: 24px;
    line-height: 24px;
    border: 1px #DBE4ED solid;
    border-radius: 2px;
    padding-left: 10px;
}

/*下拉框右侧小箭头图标*/
.ipt-arrow-up {
    background: url("../images/arrow-up.png") no-repeat right center;
}

.ipt-arrow-down {
    background: url("../images/arrow-down.png") no-repeat right center;
}

/*日期输入框右侧小图标*/
.ipt-date {
    background: url("../images/date.png") no-repeat right center;
}


/*按钮样式*/

.btn {
    display: inline-block;
    padding: 0 10px;
    height: 28px;
    border-radius: 4px;
    border: 1px #DBE4ED solid;
    background-color: #fff;
    color: #6e6e6e;
}

.table-inner {
    padding: 12px 10px;
}


/*基础表格样式*/

.table-basic {
    width: 100%;
    border: 1px #DBE4ED solid;
    border-radius: 4px;
    border-collapse: separate;
}

.table-basic td {
    border-right: 1px #DBE4ED solid;
}

.table-basic tr td:last-child {
    border-right: none;
}

.table-basic thead tr td {
    height: 54px;
    line-height: 54px;
    border-bottom: 1px #DBE4ED solid;
    font-size: 14px;
    font-weight: bold;
    text-align: center;
}

.p10 {
    padding: 0 10px;
}


/*表格头部右边添加状态*/

.span-status {
    display: inline-block;
    height: 14px;
    padding-right: 18px;
    cursor: pointer;
}

.span-status:after {
    display: inline-block;
    content: "";
    width: 6px;
    height: 11px;
    margin-left: 10px;
}


/*表格左侧选择框*/

.td-checkbox {
    display: inline-block;
    width: 14px;
    height: 14px;
}


/*默认状态*/

.status0:after {
    background: url("../images/status0.png")
}


/*从上到下*/

.status1:after {
    background: url("../images/status1.png")
}
/*从下到上*/

.status2:after {
    background: url("../images/status2.png")
}

.table-color tbody tr:hover td {
    background-color: #DBE4ED;
}

.table-color tbody tr:nth-child(even):hover td {
    background-color: #DBE4ED;
}

.table-basic tbody tr td {
    height: 20px;
    line-height: 20px;
    padding: 10px;
    font-size: 12px;
    color: #6e6e6e;
    text-align: center;
}

.table-color tbody tr:nth-child(even) td {
    background-color: #EDF0F5;
}

.table-color tbody tr:first-child:hover td {
    background-color: #fff;
}
.table-border tbody tr:not(last-child) td {
    border-bottom: 1px #DBE4ED solid;
}
.table-basic a {
    color: #5681C2;
    text-decoration: underline;  
}
/*详情页表格结构容器*/
.content-box {
    padding: 0 10px;
}

.content-box h3 {
    display: block;
    height: 58px;
    line-height: 58px;
    font-size: 14px;
    color: #999;
    font-weight: 800;
}

.content-box h3:before {
    display: inline-block;
    margin-right: 10px;
    width: 4px;
    height: 8px;
    content: "";    
    background: url("../images/arrow-right.png");
}

/*详情页仿表格结构样式*/
.like-table {
    width: 100%;
    border: 1px solid #DBE4ED;
    border-radius: 4px;
}
.like-table ul {
    display: table;
    width: 100%;
}
.like-table ul:after {
    content: "";
    clear: both; 
}
.like-table ul li {
    float: left;
    box-sizing: border-box;
    padding: 10px 15px;
    line-height: 20px;
    border-right: 1px solid #DBE4ED;
    border-bottom: 1px solid #DBE4ED;
    font-size: 12px;
    color: #6e6e6e;
}
.like-table ul li:last-child {
    border-right: none; 
}
.like-table ul:last-child li {
    border-bottom: none;  
}

.like-table ul li.key {
    width: 150px;
    font-size: 14px;
    color: #2e2e2e;
    border-right: none; 
}
.like-table ul li.l1 {
    width: 100%;
}
.like-table ul li.l2 {
    width: calc(100% - 150px)
}
.like-table ul li.l4 {
    width: calc(50% - 150px)
}
.like-table ul li.l6 {
    width: calc(33.3333% - 150px)
}



/*下拉框*/

.span-select {
    width: 100%;
    height: 24px;
    position: relative;
}

.span-select .select {
    display: none;
    position: absolute;
    left: 0;
    top: 34px;
    width: 120px;
    height: 102px;
    border-radius: 4px;
    overflow: scroll;
    box-shadow: 0 0 4px rgba(14, 46, 112, .14)
}

.span-select .select ul li {
    width: 120px;
    height: 34px;
    line-height: 34px;
}


/*翻页*/

.page {
    margin-top: 10px;
    padding: 0 10px;
    height: 20px;
    line-height: 20px;
    font-size: 14px;
    color: #6e6e6e;
}

.page .info {
    display: block;
    float: right;
    height: 20px;
}

.page .control {
    display: block;
    float: right;
    height: 20px;
    padding-right: 20px;

}

.page .control a {
    display: block;
    float: left;
    width: 20px;
    height: 20px;
    border-radius: 10px;
}
.page .control span {
    display: block;
    float: left;
    height: 20px;
    line-height: 20px;
    padding: 0 10px;
}

.page .control a.pre {
    background: url("../images/page-left.png")
}

.page .control a.pre-dis {
    background: url("../images/page-left-dis.png")
}

.page .control a.next {
    background: url("../images/page-right.png")
}

.page .control a.next-dis {
    background: url("../images/page-right-dis.png")
}


/*page-header样式
--------------------------------------------------------------------------------------------------------------------------*/

.page-header {
    height: 76px;
    background: #fff;
    color: #818181;
    box-shadow: 0 0 4px rgba(14, 65, 117, .1);
}


/* logo样式 */

.page-header .logo {
    display: block;
    float: left;
    margin: 15px 0 0 36px;
    width: 135px;
    height: 48px;
    background: url('../images/logo.png')
}


/* 最右边登录和帮助中心 */

.page-header .option {
    float: right;
    margin-top: 30px;
    width: 180px;
    font-size: 14px;
    text-align: right;
}

.page-header .option a {
    display: inline-block;
    width: 80px;
    height: 22px;
    line-height: 22px;
    text-indent: 30px;
    color: #8a8a8a;
    text-align: left
}

.page-header .option a:hover {
    color: #5681c2;
}

.page-header .option a.i-help {
    background: url('../images/help.png') no-repeat left center;
}

.page-header .option a.i-quit {
    background: url('../images/quit.png') no-repeat left center;
}

.page-header .option li span {
    padding-left: 10px;
}


/* 中间导航 */

.page-header .top-nav {
    float: right;
    margin-right: 100px;
    margin-top: 20px;
}

.page-header .top-nav li {
    float: left;
    width: 60px;
    height: 50px;
    text-align: center;
}

.page-header .top-nav li i {
    display: inline-block;
    width: 28px;
    height: 28px;
    background: url(../images/user.png) no-repeat;
}

.page-header .top-nav li span {
    display: block;
    width: 60px;
    height: 20px;
    line-height: 20px;
    color: #818181;
    text-align: center;
}


/*点击选中样式*/

.page-header .top-nav li.active i {
    background: url(../images/user-blue.png) no-repeat;
}

.page-header .top-nav li.active span {
    color: #144390;
}


/*page-content样式
--------------------------------------------------------------------------------------------------------------------------*/

.page-content {
    display: table;
    margin-top: 10px;
    height: -moz-calc(100% - 76px - 10px);
    /*整体高度减去顶部高度和间隔*/
    height: -webkit-calc(100% - 76px - 10px);
    /*整体高度减去顶部高度和间隔*/
    height: calc(100% - 76px - 10px);
    /*整体高度减去顶部高度和间隔*/
}


/*左导航容器*/

.side-bar {
    float: left;
    width: 196px;
    background-color: #265e96;
    height: 700px;
}


/*用户信息*/

.side-bar .user-info {
    margin: 25px 0 0 36px;
    width: 150px;
    height: 50px;
    color: #fff;
    overflow: hidden;
}

.side-bar .user-info dd {
    float: left;
    width: 50px;
    height: 50px;
    border-radius: 25px;
    overflow: hidden;
}

.side-bar .user-info dd img {
    width: 50px;
    height: 50px;
}

.side-bar .user-info dt {
    float: left;
    margin-left: 10px;
    width: 90px;
}

.side-bar .user-info dt b {
    display: block;
    margin-top: 5px;
    font-size: 16px;
    font-weight: normal;
}

.side-bar .user-info dt span {
    display: block;
    margin-top: 10px;
    height: 12px;
    line-height: 12px;
}


/*左导航*/

.side-bar .side-nav {
    width: 178px;
    margin: 40px auto 0 auto;
    border: 1px #0e2e66 solid;
    border-radius: 2px;
}

.side-nav li {
    color: #fff;
    line-height: 40px;
    border-bottom: 1px #0e2e66 solid;
}

.side-nav li:last-child {
    border-bottom: none;
}

.side-nav li.active {
    background: linear-gradient(to bottom, rgba(14, 64, 117, 1) 0%, rgba(14, 64, 117, .4) 100%);
}

.side-nav li b {
    display: block;
    padding-left: 31px;
    height: 40px;
    line-height: 40px;
    font-size: 15px;
    color: #DAE0E0;
    cursor: pointer;
}

.side-nav li p {
    border-top: 1px rgba(219, 228, 237, .6) solid;
}

.side-nav li p span {
    display: block;
    height: 40px;
    line-height: 40px;
    padding-left: 61px;
    font-size: 12px;
    position: relative;
}

.side-nav li p span:before {
    display: block;
    position: absolute;
    z-index: 1;
    content: "";
    left: 31px;
    top: 15px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    border: 1px #727981 solid;
}

.side-nav li p .current:before {
    border: 1px #fff solid;
    background: #fff;
}

.side-nav li p span a {
    color: #fff;
}


/*右主题*/

.content {
    float: left;
    margin-left: 10px;
    width: calc(100% - 196px - 20px);
    /*整体宽度减去左侧宽度和间隔*/
    height: 100%;
    padding-bottom: 40px;
    background-color: #fff;
    border-radius: 4px 4px 0 0;
}


/*面包屑*/

.content .breadcrumb {
    height: 50px;
    line-height: 50px;
    font-size: 16px;
    padding-left: 10px;
}

.content .breadcrumb i {
    display: inline-block;
    margin: 0 8px;
    width: 4px;
    height: 8px;
    background: url("../images/arrow-right.png") no-repeat center;
}

.content .breadcrumb a {
    color: #BFBDBD;
}

.content .breadcrumb span {
    color: #5681C2;
}

/*搜索栏*/

.search-bar {
    height: 46px;
    line-height: 46px;
    border-bottom: 1px #DBE4ED solid;
}

.search-bar .search {
    float: left;
    width: 242px;
    height: 28px;
    padding-left: 9px;
    position: relative;
}

.search-bar .search .search-input {
    display: inline-block;
    width: 185px;
    height: 28px;
    line-height: 28px;
    border: 1px #DBE4ED solid;
    border-radius: 4px;
    padding-left: 8px;
    padding-right: 28px;
    font-size: 12px;
    color: #6e6e6e;
}

.search-bar .search .clear-search {
    display: block;
    position: absolute;
    left: 170px;
    top: 15px;
    width: 15px;
    height: 16px;
    background: url("../images/clear-search.png");
    cursor: pointer;
}

.search-btn {
    margin-left: 5px;
}

.search-bar .btn-group {
    float: right;
    min-width: 242px;
    height: 28px;
    text-align: right;
}

.search-bar .btn-group button {
    margin-right: 10px;
}

/*顶部tab选项卡*/
.top-tab {
    padding-top: 10px;
    height: 28px;
    line-height: 28px;
    background: #ebf1fa;
}

.top-tab ul li {
    float: left;
    margin-right: 2px;
    height: 26px;
    line-height: 28px;
    padding: 0 10px;
    border: 1px solid #C1CCD8;
    border-radius: 4px 4px 0 0;
    font-size: 14px;
    color: #6e6e6e;
    cursor: pointer;
}
.top-tab ul li.active {
    border: 1px solid #fff;
    background-color: #fff;
    color: #5681C2;
}
.top-tab a {
    color: #6e6e6e;
}


/*门店详情表格*/

.retail-table tr td:nth-child(1) {
    width: 40px;
}

.retail-table tr td:nth-child(2) {
    width: 12.5%;
}

.retail-table tr td:nth-child(3) {
    width: 12.5%;
}

.retail-table tr td:nth-child(4) {
    width: 12.5%;
}

.retail-table tbody tr td:nth-child(4) {
    color: #5681C2;
    text-decoration: underline;
}

.retail-table tr td:nth-child(5) {
    width: calc(50% - 46px);
}

.retail-table tr td:nth-child(6) {
    width: 12.5%;
}

.retail-table tr td:nth-child(7) {
    width: 12.5%;
}

/*储值卡表格*/

.card-table tr td:nth-child(1) {
    width: 16%;
}

.card-table tr td:nth-child(2) {
    width: 13%;
}

.card-table tr td:nth-child(3) {
    width: 19%;
}

.card-table tbody tr td:nth-child(2),
.card-table tbody tr td:nth-child(3){
    color: #5681C2;
    text-decoration: underline;  
}

.card-table tr td:nth-child(4) {
    width: 13%;
}

.card-table tr td:nth-child(5) {
    width: 13%;
}

.card-table tr td:nth-child(6) {
    width: 13%;
}

.card-table tr td:nth-child(7) {
    width: 13%;
}

/*会员表格*/

.customer-table tr td:nth-child(1) {
    width: 40px;
}

.customer-table tr td:nth-child(2) {
    width: 11%;
}

.customer-table tr td:nth-child(3) {
    width: 11%;
}

.customer-table tbody tr td:nth-child(2),
.customer-table tbody tr td:nth-child(3){
    color: #5681C2;
    text-decoration: underline;  
}

.customer-table tr td:nth-child(4) {
    width: 11%;
}

.customer-table tr td:nth-child(5) {
    width: 11%;
}

.customer-table tr td:nth-child(6) {
    width: 11%;
}

.customer-table tr td:nth-child(7) {
    width: calc(18% - 40px);
}
.customer-table tr td:nth-child(8) {
    width: 11%;
}

.customer-table tr td:nth-child(9) {
    width: 16%;
}

